<template>
  <FrontSideTable
    ref="statDiseaseBridgeTable"
    dataUrl="/decision/statDisease/getSelectedBridgeList"
    :dataParam="{statDiseaseId:statDisease.id}"
    :tableTitle="statDisease.name + ' 桥梁范围管理'"
    :columns="columns"
    searchHint="输入关键字搜索，多个关键字用空格隔开"
    :searchProps="searchProps"
    @onBack="handleBack"
    :addable="false"
    customButton
    customFormDialog
    canBack>

    <!--按钮区域-->
    <template slot="buttonArea">
      <el-button size="mini" style="margin-left:0" @click="handleStatDiseaseBridgeAdd" icon="check">统计桥梁选择</el-button>
    </template>

    <!--操作列-->
    <template slot="afterColumns">
      <el-table-column v-if="canDelete" label="操作" align="center" width="70">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </template>

    <!--对话框区域-->
    <template slot="dialog">
      <el-dialog title="桥梁选择" size="large" v-model="isBridgeDialogVisible" :close-on-click-modal="false">
        <Table
          ref="bridgeTable"
          v-loading="loadingBridgeTable"
          title="桥梁列表"
          :pageData="bridgePageData"
          searchHint="输入关键字搜索，多个关键字用空格隔开"
          @sizeChange="handleBridgeTableSizeChange"
          @pageTurning="handleBridgeTablePageTurning"
          @sortChange="handleBridgeTableSortChange"
          @filterChange="handleBridgeTableFilterChange"
          @search="handleBridgeTableSearch"
          @select="handleBridgeSelect"
          @selectAll="handleBridgeSelectAll">
          <!--选择列-->
          <el-table-column type="selection" width="50"></el-table-column>
          <!--表格主体内容-->
          <el-table-column v-for="col of bridgeColumns"
                           align="center"
                           :key="col.prop"
                           :prop="col.prop"
                           :label="col.label"
                           :width="col.width"
                           :sortable="col.sortable">
          </el-table-column>
        </Table>
        <!---对话框按钮去-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="isBridgeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateStatDiseaseBridge" :loading="isBridgeDialogLoading">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../template/FrontSideTable.vue"
  import Table from "../../components/content/bridge/Table.vue"
  import {doDelete, doGet, doPost} from "../../assets/js/utils/RequestUtils"
  import {ADD, DELETE} from "../../assets/js/enum/FunctionType"
  import {getAuthorizedFunction, hasAuthorizedFunction} from "../../assets/js/global"

  /** 桥梁选择数据地址 */
  const BRIDGE_URL = "/decision/statDisease/getBridgeListForSelect";

  /** 桥梁添加地址 */
  const STAT_BRIDGE_ADD_URL = "/decision/statDisease/addStatBridge";

  const STAT_BRIDGE_DELETE_URL = "/decision/statDisease/deleteStatBridge";

  export default {
    name:"StatDisease",
    props:{
      statDisease:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        currentBridgeList:[],
        //桥梁选择对话框参数
        bridgePageData:{
          data:[],
          pageSize:10,
          total:0,
          currentPage:1
        },
        bridgeSearchValues:[],
        bridgeSortProp:"",
        bridgeOrder:"",
        bridgeFilter:{prop:"", values:[]},
        loadingBridgeTable:false,
        isBridgeDialogVisible:false,
        bridgeColumns:[
          {prop:"name", label:"桥名"},
          {prop:"roadNo", label:"路线号", sortable:"custom"},
          {prop:"superstructureTypeName", label:"上部结构类型"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"}
        ],
        selectedBridgeList:[],
        isBridgeDialogLoading:false,
        //桥梁表参数
        columns:[
          {prop:"name", label:"桥名"},
          {prop:"roadNo", label:"路线号", width:"150", sortable:true},
          {prop:"superstructureTypeName", label:"上部结构类型"},
          {prop:"bridgeCategoryName", label:"桥梁类别", width:"150"},
          {prop:"unitsName", label:"管养单位"}
        ],
        searchProps:["name", "roadNo", "unitsName", "superstructureTypeName"],
      }
    },
    computed: {
      canDelete() {
        return hasAuthorizedFunction(this, DELETE);
      },
    },
    methods:{
      handleBack() {
        this.$emit("onBack");
      },
      handleStatDiseaseBridgeAdd() {
        this.selectedBridgeList = [];
        this.fetchBridgePageData();
        this.isBridgeDialogVisible = true;
      },
      handleBridgeTableSizeChange(pageSize) {
        this.bridgePageData.pageSize = pageSize;
        this.fetchBridgePageData();
      },
      handleBridgeTablePageTurning(index) {
        this.bridgePageData.currentPage = index;
        this.fetchBridgePageData();
      },
      handleBridgeTableSortChange({column, prop, order}) {
        this.bridgeSortProp = prop;
        this.order = order;
        this.fetchBridgePageData();
      },
      handleBridgeTableFilterChange(filter) {
        this.bridgeFilter = filter;
        this.fetchBridgePageData();
      },
      handleBridgeTableSearch(value) {
        this.bridgeSearchValues = value.split(" ");
        this.fetchBridgePageData();
      },
      handleBridgeSelect(selection, row) {
        let index = this.selectedBridgeList.findIndex(item=>item.id === row.id);
        if(index > 0) this.selectedBridgeList.splice(index, 1);
        else this.selectedBridgeList.push(row);
      },
      handleBridgeSelectAll(selection) {
        if(selection.length === 0) {
          this.selectedBridgeList = this.selectedBridgeList.filter(item=>!this.bridgePageData.data.find(i=>i.id === item.id));
        } else {
          selection.forEach(item=>{
            if(!this.selectedBridgeList.find(i=>i.id === item.id)) {
              this.selectedBridgeList.push(item);
            }
          })
        }
      },
      fetchBridgePageData() {
        this.loadingBridgeTable = true;
        doGet(BRIDGE_URL, {
          data:{
            id:this.statDisease.id,
            pageSize:this.bridgePageData.pageSize,
            currentPage:this.bridgePageData.currentPage,
            searchArray:this.bridgeSearchValues,
            sortProp:this.bridgeSortProp,
            order:this.bridgeOrder,
            filterProp:this.bridgeFilter.prop,
            filterValues:this.bridgeFilter.values
          },
          component:this
        })
          .then(response=>this.bridgePageData = response)
          .finally(()=>{
            this.checkDefaultRows();
            this.loadingBridgeTable = false;
          })
      },
      checkDefaultRows() {
        if(this.$refs["bridgeTable"]) {
          this.bridgePageData.data.forEach(item=>{
            if(this.selectedBridgeList.find(bridge=>bridge.id === item.id)) {
              this.$refs["bridgeTable"].toggleRowSelection(item, true);
            } else {
              this.$refs["bridgeTable"].toggleRowSelection(item, false);
            }
          })
        }
      },
      updateStatDiseaseBridge() {
        this.isBridgeDialogLoading = true;
        doPost(STAT_BRIDGE_ADD_URL, {
          data:{
            statDiseaseId:this.statDisease.id,
            bridgeList:this.selectedBridgeList
          },
          menuFunctionId:getAuthorizedFunction(this, ADD),
          component:this
        })
          .then(response=>this.$message({message: response.message, type: response.status.toLowerCase()}))
          .finally(()=>{
            this.isBridgeDialogLoading = false;
            this.isBridgeDialogVisible = false;
            if(this.$refs["statDiseaseBridgeTable"]) this.$refs["statDiseaseBridgeTable"].fetchData();
          });
      },
      /*  删除行  */
      handleDelete(rowData) {
        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }).then(()=>{
          doDelete(STAT_BRIDGE_DELETE_URL, {
            data:{
              statDiseaseId:this.statDisease.id,
              bridgeId:rowData.id
            },
            menuFunctionId:getAuthorizedFunction(this, DELETE),
            component:this
          })
            .then(response => {
              this.$message({message:response.message, type:response.status.toLowerCase()});
              if(this.$refs["statDiseaseBridgeTable"]) this.$refs["statDiseaseBridgeTable"].fetchData();
            });
        });
      },
    },
    components:{FrontSideTable, Table}
  }
</script>



// WEBPACK FOOTER //
// StatDiseaseBridge.vue?4fcac38c
